<template>
  <div bd-line flex min-h-100>
    <div bg-gray-800 flex-center w-80>
      <slot name="icon"><i-ep-download size-36 /></slot>
    </div>
    <div py-5 pl-20 flex-col flex-1 justify-around>
      <slot name="content">
        <div text-medium text-16 font-bold>{{ title }}</div>
        <div c-9>{{ desc }}</div>
        <div>
          <slot name="operation">
            <el-button type="primary" @click="() => operation(operationTitle)">
              {{ operationTitle }}
            </el-button>
          </slot>
        </div>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  title: {
    type: String,
    default: '标题',
  },
  desc: {
    type: String,
    default: '描述',
  },
  operationTitle: {
    type: String,
    default: '操作按钮',
  },
  operation: {
    type: Function,
    default: () => {},
  },
})
</script>
